 <style type="text/css">
        .back-plays .active{
            color: #FFF;
            background-color: #009BDB;
            box-shadow: none;
            width: 100px;
            border: 0;
            border-radius:5px;
            height: 30px;

        }
        .back-plays .active:hover{
            color: #FFF;
            background-color: rgba(0, 155, 219, 0.7);
            border-color: #009BDB;
        }
        .back-plays .other-btn{
            color: #666;
            background-color: #FAFCFB;
            border:solid .2px  #D9D9D9;
            box-shadow: none;
            width: 100px;
            border-radius:5px;
            height: 30px;

        }
        .back-plays .other-btn:hover{
            background: #E8E9ED !important;
        }
        .display{
            display:none;
        }


    </style>
<div style="margin-top:5px;margin-bottom: 4px;text-align: center" class="back-plays">
    <button  class="phone-back active" style="position: relative;">手机号找回
        <input type="radio" name="validateType" checked="checked" value="1" @click="info.backPlays = 1" :checked="info.backPlays === 1" style="opacity:0;width: 100%;height: 100%;margin: 0;display: inline-block;position: absolute;left: 0;top: 0;">
    </button>
    <button class="email-back other-btn" style="position: relative;margin-left: 20px">邮箱找回
        <input type="radio"  name="validateType" checked="checked"  value="2" @click="info.backPlays = 2" :checked="info.backPlays === 2" style="opacity:0;width: 100%;height: 100%;margin: 0;display: inline-block;position: absolute;left: 0;top: 0;"  >
    </button>
</div>
<div class="retrieve-password-page forget-pwd setting-dialog">

        <div class="back-plays1">
            <form class="form form-horizontal retrieve-password-phone-form">
                <div class="form-group">
                    <label class="form-label required"> 手机号</label>
                    <input type="text" class="forget-input form-control " name="mobile"
                           placeholder="请输入手机号码"
                           data-errormessage-value-missing="手机号码有误!"/>
                </div>
                <div class="form-group">
                    <label class="form-label required"> 验证码</label>
                    <input type="text" class="forget-input form-control" maxlength="10" name="smsCode"
                           placeholder="请输入验证码" />
                    <span class="send-code send-code-hook">发送验证码</span>
                </div>
                <div class="form-group col-sm-12  text-center" style="margin-bottom: 5px">
                    <button type="submit" class="btn btn-default">下一步</button>
                    <div style="width: 50px;display: inline-block"></div>
                    <button type="button" class="btn btn-cancel btn-gray">取 消</button>
                </div>
            </form>
        </div>

        <div class="display back-plays2">
            <form class="form  retrieve-password-email-form form-horizontal" >
                <div class="form-group">
                    <label class="form-label required"> 电子邮箱</label>
                    <input type="text" class="forget-input form-control " name="email"
                           placeholder="请输入电子邮箱"
                           data-errormessage-value-missing="电子邮箱有误!"/>
                </div>
                <div class="form-group">
                    <label class="form-label required"> 验证码</label>
                    <input type="text" class="forget-input form-control" maxlength="10" name="emailCode"
                           placeholder="请输入验证码"/>
                    <span class="send-code send-email-hook">发送验证码</span>
                </div>
                <div class="form-group col-sm-12  text-center" style="margin-bottom: 5px">
                    <button type="submit" class="btn btn-default">下一步</button>
                    <div style="width: 50px;display: inline-block"></div>
                    <button type="button" class="btn btn-cancel btn-gray">取 消</button>
                </div>
            </form>
        </div>

    <div style="height: 30px" class="bootstrap-dialog-footer"></div>
</div>
<script type="text/javascript" src="js/retrieve-password.js" custom></script>
<script type="text/javascript">
    $('.phone-back').on('click',function () {
        $('.phone-back').removeClass("other-btn ");
        $('.phone-back').addClass("active ");
        $(".email-back").removeClass("active");
        $('.email-back').addClass("other-btn ");
        $(".back-plays1").removeClass("display");
        $('.back-plays2').addClass("display ");
    })
    $('.email-back').on('click',function () {
        $('.phone-back').removeClass("active");
        $('.phone-back').addClass("other-btn ");
      $(".email-back").removeClass("other-btn ");
      $('.email-back').addClass("active ");
        $(".back-plays2").removeClass("display");
        $('.back-plays1').addClass("display ");
    })
</script>
